<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>
<script>
    // try/catch/finally 语句用于处理代码中可能出现的错误信息。
    // 1. 捕获代码在执行过程中可能出来的错误, 防止其影响后续代码的执行
    // 2. 兼容写法  (错误发生时的补救性措施)

    // var a = 100;
    // var b = 200;
    // console.log(c);  // 此处报错  => 代码不会继续向后执行

    // console.log("代码执行完毕");


    //   1. 捕获代码在执行过程中可能出来的错误, 防止其影响后续代码的执行
    /*  try {
         var a = 100;
         var b = 200;
         console.log(c);  // 此处报错  => 代码不会继续向后执行

     } catch (err) {
         console.log("err", err);
     }finally{
         
     }

     console.log("代码执行完毕"); */


    // 2. 兼容写法(错误发生时的补救性措施)

    var box = document.getElementsByClassName("box")[0];

    // getComputedStyle(box)["width"]     ||   ele.currentStyle[attr]
    // addEventListener    attachEvent
    // removeEventListener    detachEvent
    // e.stopPropagation()    e.cancelBubble = true;
    // e.preventDefult()    e.returnValue = false;


    // function getStyle(ele, attr) {
    //     if (getComputedStyle) {
    //         return getComputedStyle(ele)[attr];
    //     } else {
    //         return ele.currentStyle[attr];
    //     }
    // }

    function getStyle(ele, attr) {
        try {
            return getComputedStyle(ele)[attr];
        } catch (err) {
            return ele.currentStyle[attr];
        }

    }







</script>

</html>